<template>
	<view  class="bg">

		<view class="listv row jsbg" >
			<view class="list" v-for="item in list" :key="item.address" @tap="play(item)">
					<view style="margin: 10rpx;">
					<image class="zbtoux" :src="item.xinimg" mode=""></image>
					<text class="zbname">{{item.title}}</text>
	                    <view >
							<text class="room">房间数:{{item.Number}}</text>
						</view>
					<view style="margin-top: 30rpx;"></view>
	
					</view>
					</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPlayBtn:false,
				showFullBtn:false,
				height:190,
				list: [],
				load:false,
				pingtais:''
				
			}
		},
		computed: {
		},
		onLoad() {
			this.GetJson(this.ip + 'setapp.php','POST', {}, e => {
            this.pingtais = e.pingtai;
			})			
		},
		onReady() {
		
		},
		methods: {
			getdata(is) {
			this.load = true;
			this.GetJson(this.ip+'zhibo.php', 'GET', {}, e => {
				this.list = e.pingtai;
				uni.stopPullDownRefresh();
			})
			},
			listtap(item) {
				let fangjian = item.address;
				let fjname = item.title;
				let img = item.xinimg;
				uni.navigateTo({
					url: 'newpage?fangjian='+ fangjian + '&fjname='+fjname +'&img='+img
				})
			},
			play(item) {
				let fangjian = item.address;
				let pingtai = item.title;
					uni.navigateTo({
						url: 'play?fangjian=' + fangjian +'&pingtai=' + pingtai
					})
				
			},
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.index < 2) {
				uni.navigateTo({
					url: '../msg/msg'
				})
				uni.$once('adder', (data) => {
					if (data != null) {
						this.$store.state.city = data;
					}
				});
			}else{
				uni.navigateTo({
					url:'../sou/sou',
					animationType:'fade-in'
				})
			}
		},
		onPullDownRefresh() {
			this.getdata(true);
		},
		watch: {
			'$store.state.city':{
				handler(newitem, old) {
					console.log(newitem)
	
						this.getdata(true);
					 
				},
				immediate: true
			}
		}
	}
</script> 

<style>
	page{
		background-color: #181b2e;
	}

	.jsbg{
		background-color: #181b2e;
		border-radius: 10rpx;
		margin: 14rpx;
	}
    .room{
		background-image: linear-gradient(to right ,#d71af9,#f9c71a);
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		font-size: 28rpx;
		
		
	}
	.zbtoux{
		float:left;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		margin: 5rpx;
	}
	.zbname{
		background-image: linear-gradient(to right ,#5a18d1,#9B63FF);
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		margin: 5rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
		line-height: 70rpx;
		font-weight: 600;
	}

	.listv {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
		
	}

	.list {
		background-color: #262a47;
		margin-top: 30rpx;
		border-radius: 20rpx;
		box-shadow: 8rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 1;
		width: 320rpx;
		margin-bottom: 30rpx;
		animation: opacitys .1s;
	}

	.list>image {
		width: 320rpx;
		height: 400rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-shadow: 8rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.list>view>image {
		width: 120rpx;
		height: 120rpx;
		border-radius:20rpx;
		margin-right: 10rpx;
		
	}

	.list>view>text {
		
		
	}

</style>
